<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
	<title>我要发单</title>
	<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
	<link rel="stylesheet" href="../../static/weixin/css/common.css" th:href="@{/weixin/css/common.css}" />
	<script type="text/javascript" th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/weui.min.js" th:src="@{/weixin/js/weui.min.js}"></script>
	<script type="text/javascript" th:src="@{/weixin/js/picker-citys.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/fastclick.min.js" th:src="@{/weixin/js/fastclick.min.js}"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" th:src="@{/weixin/js/jweixin-1.0.0.js}"></script>
</head>

<body>
	<div class="container" id="container">
		<!-- Main content -->
		<div class="page">
			<div class="page__bd">
				<form id="form" method="post">
					<div class="weui-cells__title">标题</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" name="title" required="" maxlength="30" type="text" emptytips="请输入标题" placeholder="请输入标题"></input>
							</div>
							<div class="weui-cell__ft">
								<i class="weui-icon-warn"></i>
							</div>
						</div>
					</div>

					<div class="weui-cells__title">行业</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<select class="weui-select" name="major">
								<option th:each="major:${majors}" th:value="${major.value}" th:text="${major.name}"></option>
							</select>
						</div>
					</div>
					
					<div class="weui-cells__title">风格</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<select class="weui-select" name="style">
								<option th:each="style:${styles}" th:value="${style.value}" th:text="${style.name}"></option>
							</select>
						</div>
					</div>

					<div class="weui-cells__title">面积</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" name="size" required="" pattern="^[0-9]+(.[0-9]{2})?$" maxlength="11"
									placeholder="面积" emptytips="请输入面积"
									notmatchtips="面积格式为小数点后两位"></input>
							</div>
							<div class="weui-cell__ft">
								<i class="weui-icon-warn"></i>
							</div>
						</div>
					</div>
					
					<div class="weui-cells__title">预算(万)</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__bd">
								<input class="weui-input" name="budget" required="" pattern="^([0-9]+)-([0-9]+)$" maxlength="11"
									placeholder="10-30" emptytips="请输入预算"
									notmatchtips="预算格式不正确"></input>
							</div>
							<div class="weui-cell__ft">
								<i class="weui-icon-warn"></i>
							</div>
						</div>
					</div>
					
					<div class="weui-cells__title">社交帐号</div>
					<div class="weui-cells weui-cells_form">
						<div class="weui-cell">
							<div class="weui-cell__hd">
								<label class="weui-label">QQ</label>
							</div>
							<div class="weui-cell__bd">
								<input class="weui-input" name="qq" type="text" placeholder="请输入QQ" />
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd">
								<label class="weui-label">微信</label>
							</div>
							<div class="weui-cell__bd">
								<input class="weui-input" name="weixin" type="text" placeholder="请输入微信" />
							</div>
						</div>
					</div>
					
	           		<div class="weui-cells__title">地区</div>
			        <div class="weui-cells weui-cells_form">
			            <div class="weui-cell">
			                <div class="weui-cell__bd">
			                   <input class="weui-input" type="text" value="" id='citypicker' readonly="true" />
			                   <input type="hidden" name="province" id="province"  />
			                   <input type="hidden" name="city" id="city"  />
			                   <input type="hidden" name="district" id="district" />
			                </div>
			            </div>
			        </div>
			        
					<div class="weui-cells__title">描述</div>
			        <div class="weui-cells weui-cells_form">
			            <div class="weui-cell">
			                <div class="weui-cell__bd">
			                    <textarea class="weui-textarea" name="comment" placeholder="请输入文本" rows="3"></textarea>
			                    <div class="weui-textarea-counter"><span>0</span>/200</div>
			                </div>
			            </div>
			        </div>

					<div class="weui-btn-area">
						<input type="button" id="submit" class="weui-btn weui-btn_primary" value="确定" />
					</div>
				</form>
			</div>
		</div>
	</div>

	<script>
		$(function() {
			$("#submit").click(function() {
				weui.form.validate("#form", function(error) {
					if (error)
						return;

					if($("#province").val() == ""){
						weui.topTips("请选择地区");
						return;
					}
					
					var l = weui.loading("正在提交")
					$.ajax({
						cache : true,
						type : "POST",
						url : "/mall/weixin/requirement/add",
						data : $('#form').serialize(),
						error : function(request) {
							l.hide();
							weui.alert("Connection error");
						},
						success : function(data) {
							l.hide();
							if (data.code != 1){
								weui.alert(data.msg);
								return;
							}
                            window.location.href = data.redirectUrl;
						}
					});
				})
			});
			
			$("#citypicker").click(function(){
			   weui.picker($.citys, {
			        depth: 3,
			        defaultValue: [18, 2, 0],
			        onConfirm: function onConfirm(result) {
			            $("#province").val(result[0].label);
			            $("#city").val(result[1].label);
			            $("#district").val("");
			            if(result[2]){
			            	$("#district").val(result[2].label);
			            }
			            
			            $("#citypicker").val($("#province").val() + " " + $("#city").val() + " " + $("#district").val());
			        },
			        id: 'cascadePicker'
			   });
			})
			
		});
	</script>

</body>
</html>
